<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
	<h1>hello world</h1>
	<input onblur="sendajax(this)" />
	<div id="msg" style="color:blue"></div>
	<script>

		var xhr = new XMLHttpRequest();

		var sendajax = function(ele) {
			let uname = ele.value
			xhr.open("post", "./test.ajax?uname=jerry")
			
			xhr.send(`uname=${uname}`) // ("uname=输入的东西")

			// 监听状态的改变（http状态404 200）  对象状态（0-4 4就是接收成功）
			// 回调函数
			xhr.onreadystatechange = function() {

				if (xhr.readyState == 4) { // 对象状态成功
					if (xhr.status == 200) { // http状态成功
						// success时处理
						let datastr = xhr.responseText
						let data = JSON.parse(datastr)
						console.info(data)

						document.getElementById("msg").innerHTML = `用户名：${data.username}, 年龄是： ${data.age}`
					}
				}
				
			}
		}

		

	</script>
	<hr />
</body>
</html>